<template>
	<view class="goods">
		<image src="../../static/10.png" class="cookertitle"></image>
		<view class="gootop">
			<scroll-view class="scroll-x" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view v-for="(item,index) in goodlist" :key="index" class="scroll-con">
					<image :src="item.img" class="goodimg"></image>
					<view class="gootext">
						<text class="goodname">{{item.goodsname}}</text>
						<text class="goodprice">￥{{item.price}}/每桌</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<text class="moregood">更多餐宴</text>
	</view>
</template>

<script>
	import goods from '@/json/goods.json'
	export default {
		data() {
			return {
				scrollTop: 0,
				goodlist: [] //商品数组
			}
		},
		methods: {
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
		},
		created() {
			this.goodlist = goods.goodslist
		}
	}
</script>

<style>
	.goods {
		padding: 10px 5px;
	}

	.cookertitle {
		height: 25px;
		width: 50%;
		display: block;
		margin: auto;
	}

	.gootop {
		margin-top: 15px
	}

	.scroll-x {
		width: 100%;
		white-space: nowrap;
		height: 230px;

	}

	.scroll-con {
		display: inline-block;
		margin-left: 20px;
		box-shadow: 0px 3px 5px #ccc;
		height: 200px;
		padding-bottom: 10px;

	}

	.goodimg {
		width: 200px;
		height: 150px;
		border-radius: 5px
	}
	.goodname {
		margin-left: 10px;
		display: block;
		/* font-size: 18px; */
		font-weight: bold;
		margin-top: 5px;
	}

	.goodprice {
		display: block;
		margin-top: 3px;
		margin-left: 10px;
		color: red;
		font-size: 14px
	}

	.moregood {
		display: block;
		    margin: auto;
		    width: 100px;
	}
</style>
